<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <title>医药企业查询平台</title>
    <link rel="stylesheet" href="/js/element-ui/element-ui.css">
    <script src="/js/vue.min.js"></script>
    <script src="/js/element-ui/element-ui.js"></script>
    <script src="/js/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        body {
            background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
            min-height: 100vh;
            padding: 20px;
            color: #333;
        }
        .container {
            /*max-width: 1400px;*/
            margin: 0 auto;
            padding: 20px;
        }
        header {
            text-align: center;
            padding: 30px 0;
            color: white;
            margin-bottom: 30px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }
        header h1 {
            font-size: 3rem;
            margin-bottom: 15px;
            background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: inline-block;
        }
        header p {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto;
            opacity: 0.9;
            line-height: 1.6;
        }
        .tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
            flex-wrap: wrap;
            gap: 10px;
        }
        .tab-btn {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: white;
            padding: 12px 24px;
            border-radius: 30px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
        }
        .tab-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        .tab-btn.active {
            background: linear-gradient(to right, #12c2e9, #c471ed);
            color: white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        .card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            margin-bottom: 30px;
            transition: transform 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px);
        }
        .card-header {
            background: linear-gradient(to right, #4b6cb7, #182848);
            color: white;
            padding: 20px;
            font-size: 1.4rem;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .card-header .el-tag {
            cursor: pointer;
        }
        .card-body {
            padding: 25px;
        }
        .table-controls {
            display: flex;
            justify-content: flex-start;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 50px;
        }
        .table-container {
            overflow-x: auto;
        }
        .custom-table {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .custom-table .el-table th {
            background: linear-gradient(to bottom, #f5f7fa, #e4e7ed);
            color: #2c3e50;
            font-weight: bold;
        }
        .custom-table .el-table__row:hover td {
            background-color: #f0f9ff !important;
        }
        .el-table__expanded-cell {
            padding: 20px !important;
        }
        .el-table__expanded-cell p {
            padding-bottom: 5px !important;
        }
        .feature-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-top: 40px;
        }
        .feature-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .feature-card h3 {
            color: #2c3e50;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #4b6cb7;
        }
        .feature-card ul {
            padding-left: 20px;
        }
        .feature-card li {
            margin-bottom: 10px;
            line-height: 1.6;
        }
        .footer {
            text-align: center;
            color: white;
            padding: 30px 0;
            margin-top: 30px;
            font-size: 0.9rem;
            opacity: 0.9;
        }
        .status-tag {
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: bold;
        }
        .status-active {
            background-color: #e1f3d8;
            color: #67c23a;
        }
        .status-pending {
            background-color: #faecd8;
            color: #e6a23c;
        }
        .status-inactive {
            background-color: #fde2e2;
            color: #f56c6c;
        }
        .pagination-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        @media (max-width: 768px) {
            .table-controls {
                flex-direction: column;
            }
            .table-controls .el-input {
                width: 100%;
            }
            header h1 {
                font-size: 2.2rem;
            }
        }
        .demo-image {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            background: linear-gradient(45deg, #12c2e9, #c471ed);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 1.5rem;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <div class="table-controls">
            <el-input
                    placeholder="输入医药企业名称..."
                    v-model="searchInput"
                    @keyup.enter.native="search"
                    clearable
                    style="width: 400px;">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-input
                    placeholder="输入成分词..."
                    v-model="comp"
                    @keyup.enter.native="search"
                    clearable
                    style="width: 400px;">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-input
                    placeholder="输入适应症..."
                    v-model="f12"
                    @keyup.enter.native="search"
                    clearable
                    style="width: 400px;">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-input
                    placeholder="输入靶点..."
                    v-model="f19"
                    @keyup.enter.native="search"
                    clearable
                    style="width: 400px;">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-button type="primary" icon="el-icon-refresh" @click="search">刷新数据</el-button>
            <el-button type="primary" icon="el-icon-view" @click="report">数据统计</el-button>
        </div>

        <div class="card">
            <div class="card-header">
                药品详情
                <el-tag type="success"
                        :class="toggleFlag.medFlag ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"
                        @click="toggleFlag.medFlag = !toggleFlag.medFlag">
                </el-tag>
            </div>
            <div class="card-body" v-if="toggleFlag.medFlag">
                <div class="table-container">
                    <el-table
                            class="custom-table"
                            :data="domesticProjectProgressList"
                            style="width: 100%">
                        <el-table-column type="expand" class="expend-colum">
                            <template slot-scope="props">
                                <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
                                    <el-tab-pane label="详情" name="first">
                                        <p><strong>成分词：</strong> {{ props.row.f1 }}</p>
                                        <p><strong>成分词英文名：</strong> {{ props.row.f2 }}</p>
                                        <p><strong>企业名称：</strong> {{ props.row.f3 }}</p>
                                        <p><strong>参与企业：</strong> {{ props.row.f5 }}</p>
                                        <p><strong>药品名称：</strong> {{ props.row.f7 }}</p>
                                        <p><strong>特殊审评通道：</strong> {{ props.row.f8 }}</p>
                                        <p><strong>一致性评价状态：</strong> {{ props.row.f9 }}</p>
                                        <p><strong>当前项目进度：</strong> {{ props.row.f10 }}</p>
                                        <p><strong>当前进度进展时间：</strong> {{ props.row.f11 }}</p>
                                        <p><strong>适应症（按项目）国内状态：</strong> {{ props.row.f12 }}</p>
                                        <p><strong>推测适应症来源：</strong> {{ props.row.f13 }}</p>
                                        <p><strong>成分适应症状态（境内）：</strong> {{ props.row.f14 }}</p>
                                        <p><strong>成分适应症状态（全球）：</strong> {{ props.row.f15 }}</p>
                                        <p><strong>药物类型：</strong> {{ props.row.f16 }}</p>
                                        <p><strong>成分类别：</strong> {{ props.row.f17 }}</p>
                                        <p><strong>技术类型：</strong> {{ props.row.f18 }}</p>
                                        <p><strong>靶点：</strong> {{ props.row.f19 }}</p>
                                        <p><strong>推测靶点来源：</strong> {{ props.row.f20 }}</p>
                                        <p><strong>新药/仿制药（Insight）：</strong> {{ props.row.f21 }}</p>
                                        <p><strong>原研地产化：</strong> {{ props.row.f22 }}</p>
                                        <p><strong>国产/进口：</strong> {{ props.row.f23 }}</p>
                                        <p><strong>成分中国最高研发阶段：</strong> {{ props.row.f33 }}</p>
                                        <p><strong>成分全球上市情况：</strong> {{ props.row.f34 }}</p>
                                        <p><strong>成分治疗领域：</strong> {{ props.row.f35 }}</p>
                                        <p><strong>ATC 编码：</strong> {{ props.row.f36 }}</p>
                                        <p><strong>ATC 中文名：</strong> {{ props.row.f37 }}</p>
                                        <p><strong>同成分竞争企业数：</strong> {{ props.row.f38 }}</p>
                                        <p><strong>原研中国内地进度：</strong> {{ props.row.f39 }}</p>
                                        <p><strong>当前项目进度（官方公示）：</strong> {{ props.row.f40 }}</p>
                                        <p><strong>当前进度进展时间（官方公示）：</strong> {{ props.row.f41 }}</p>
                                        <p><strong>适应症（按项目）国内状态（官方公示）：</strong> {{ props.row.f42 }}</p>
                                    </el-tab-pane>
                                    <el-tab-pane label="临床申请" name="second">
                                        <div class="table-container">
                                            <el-table
                                                    class="custom-table"
                                                    :data="props.row.declarationProgressList"
                                                    style="width: 100%">
                                                <el-table-column type="expand" class="expend-colum">
                                                    <template slot-scope="innerProps">
                                                        <p><strong>受理号：</strong> {{ innerProps.row.e1 }}</p>
                                                        <p><strong>首次临床申请时间：</strong> {{ props.row.f25 }}</p>
                                                        <p><strong>注册分类：</strong> {{ innerProps.row.e7 }}</p>
                                                        <p><strong>CDE 承办时间：</strong> {{ innerProps.row.e8 }}</p>
                                                        <p><strong>受理号适应症：</strong> {{ innerProps.row.e9 }}</p>
                                                        <p><strong>成分治疗领域：</strong> {{ innerProps.row.e24 }}</p>
                                                        <p><strong>剂型分类：</strong> {{ innerProps.row.e25 }}</p>
                                                        <p><strong>CDE 源企业：</strong> {{ innerProps.row.e26 }}</p>
                                                        <p><strong>NMPA 源企业：</strong> {{ innerProps.row.e27 }}</p>
                                                        <p><strong>历史企业：</strong> {{ innerProps.row.e28 }}</p>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column
                                                        :show-overflow-tooltip="true"
                                                        prop="e1"
                                                        label="受理号"
                                                        min-width="100">
                                                </el-table-column>
                                                <el-table-column
                                                        :show-overflow-tooltip="true"
                                                        label="首次临床申请时间"
                                                        min-width="130">
                                                        <template slot-scope="{ row, $index }">
                                                            {{ props.row.f25 }}  <!-- 访问外层数据 -->
                                                        </template>
                                                </el-table-column>
                                                <el-table-column
                                                        :show-overflow-tooltip="true"
                                                        prop="e7"
                                                        label="注册分类"
                                                        width="150">
                                                </el-table-column>
                                                <el-table-column
                                                        :show-overflow-tooltip="true"
                                                        prop="e8"
                                                        label="CDE 承办时间"
                                                        min-width="100">
                                                </el-table-column>
                                                <el-table-column
                                                        :show-overflow-tooltip="true"
                                                        prop="e26"
                                                        label="CDE 源企业"
                                                        min-width="250">
                                                </el-table-column>
                                                <el-table-column
                                                        :show-overflow-tooltip="true"
                                                        prop="e27"
                                                        label="NMPA 源企业"
                                                        min-width="250">
                                                </el-table-column>
                                                <el-table-column
                                                        :show-overflow-tooltip="true"
                                                        prop="e28"
                                                        label="历史企业"
                                                        min-width="250">
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="临床试验" name="third">
                                        <div class="table-container">
                                            <el-table
                                                    class="custom-table"
                                                    :data="props.row.clinicalTrialsList"
                                                    style="width: 100%">
                                                <el-table-column type="expand" class="expend-colum">
                                                    <template slot-scope="innerProps">
                                                        <p><strong>登记号：</strong> {{ innerProps.row.d1 }}</p>
                                                        <p><strong>首次临床试验公示时间：</strong> {{ props.row.f27 }}</p>
                                                        <p><strong>首次批准临床时间：</strong> {{ props.row.f28 }}</p>
                                                        <p><strong>试验状态变化日期：</strong> {{ innerProps.row.d30 }}</p>
                                                        <p><strong>国内试验完成日期：</strong> {{ innerProps.row.d31 }}</p>
                                                        <p><strong>首次公示日期：</strong> {{ innerProps.row.d32 }}</p>
                                                        <p><strong>分期：</strong> {{ innerProps.row.d25 }}</p>
                                                        <p><strong>标准分期：</strong> {{ innerProps.row.d26 }}</p>
                                                        <p><strong>试验代号：</strong> {{ innerProps.row.d2 }}</p>
                                                        <p><strong>疗法类型：</strong> {{ innerProps.row.d3 }}</p>
                                                        <p><strong>适应症：</strong> {{ innerProps.row.d8 }}</p>
                                                        <p><strong>适应症（Insight）：</strong> {{ innerProps.row.d9 }}</p>
                                                        <p><strong>药品名称：</strong> {{ innerProps.row.d10 }}</p>
                                                        <p><strong>成分词：</strong> {{ innerProps.row.d11 }}</p>
                                                        <p><strong>成分词英文：</strong> {{ innerProps.row.d12 }}</p>
                                                        <p><strong>靶点：</strong> {{ innerProps.row.d13 }}</p>
                                                        <p><strong>药品类型：</strong> {{ innerProps.row.d14 }}</p>
                                                        <p><strong>新药/仿制药（Insight）：</strong> {{ innerProps.row.d15 }}</p>
                                                        <p><strong>原研地产化：</strong> {{ innerProps.row.d16 }}</p>
                                                        <p><strong>成分类别：</strong> {{ innerProps.row.d17 }}</p>
                                                        <p><strong>成分治疗领域：</strong> {{ innerProps.row.d18 }}</p>
                                                        <p><strong>剂型分类：</strong> {{ innerProps.row.d19 }}</p>
                                                        <p><strong>联合用药：</strong> {{ innerProps.row.d20 }}</p>
                                                        <p><strong>对照药：</strong> {{ innerProps.row.d21 }}</p>
                                                        <p><strong>适应症疾病领域：</strong> {{ innerProps.row.d22 }}</p>
                                                        <p><strong>申办者：</strong> {{ innerProps.row.d23 }}</p>
                                                        <p><strong>历史申办者：</strong> {{ innerProps.row.d24 }}</p>
                                                        <p><strong>专业标题：</strong> {{ innerProps.row.d27 }}</p>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column
                                                        :show-overflow-tooltip="true"
                                                        prop="d1"
                                                        label="登记号"
                                                        min-width="100">
                                                </el-table-column>
                                                <el-table-column
                                                        :show-overflow-tooltip="true"
                                                        label="首次临床试验公示时间"
                                                        min-width="150">
                                                        <template slot-scope="{ row, $index }">
                                                            {{ props.row.f27 }}  <!-- 访问外层数据 -->
                                                        </template>
                                                </el-table-column>
                                                <el-table-column
                                                        :show-overflow-tooltip="true"
                                                        label="首次批准临床时间"
                                                        min-width="150">
                                                        <template slot-scope="{ row, $index }">
                                                            {{ props.row.f28 }}  <!-- 访问外层数据 -->
                                                        </template>
                                                </el-table-column>
                                                <el-table-column
                                                        :show-overflow-tooltip="true"
                                                        prop="d30"
                                                        label="试验状态变化日期"
                                                        min-width="150">
                                                </el-table-column>
                                                <el-table-column
                                                        :show-overflow-tooltip="true"
                                                        prop="d32"
                                                        label="首次公示日期"
                                                        min-width="150">
                                                </el-table-column>
                                                <el-table-column
                                                        :show-overflow-tooltip="true"
                                                        prop="d25"
                                                        label="分期"
                                                        min-width="150">
                                                </el-table-column>
                                                <el-table-column
                                                        :show-overflow-tooltip="true"
                                                        prop="d26"
                                                        label="标准分期"
                                                        min-width="150">
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="上市申请" name="fourth">
                                        <div class="table-container">
                                            <el-table
                                                    class="custom-table"
                                                    :data="props.row.drugApplicationList"
                                                    style="width: 100%">
                                                <el-table-column
                                                        :show-overflow-tooltip="true"
                                                        prop="e1"
                                                        label="受理号"
                                                        min-width="120">
                                                </el-table-column>
                                                <el-table-column
                                                        :show-overflow-tooltip="true"
                                                        label="首次上市申请时间"
                                                        min-width="160">
                                                        <template slot-scope="{ row, $index }">
                                                            {{ props.row.f30 }}  <!-- 访问外层数据 -->
                                                        </template>
                                                </el-table-column>
                                                <el-table-column
                                                        :show-overflow-tooltip="true"
                                                        label="产品首次获批上市时间"
                                                        min-width="160">
                                                        <template slot-scope="{ row, $index }">
                                                            {{ props.row.f31 }}  <!-- 访问外层数据 -->
                                                        </template>
                                                </el-table-column>
                                                <el-table-column
                                                        :show-overflow-tooltip="true"
                                                        label="批准文号"
                                                        min-width="160">
                                                        <template slot-scope="{ row, $index }">
                                                            {{ props.row.f32 }}  <!-- 访问外层数据 -->
                                                        </template>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </el-tab-pane>
                                </el-tabs>
                            </template>
                        </el-table-column>
                        <el-table-column
                                :show-overflow-tooltip="true"
                                prop="f1"
                                label="成分词"
                                min-width="150">
                        </el-table-column>
                        <el-table-column
                                :show-overflow-tooltip="true"
                                prop="f3"
                                label="企业名称"
                                min-width="200">
                        </el-table-column>
                        <el-table-column
                                :show-overflow-tooltip="true"
                                prop="f5"
                                label="参与企业"
                                min-width="250">
                        </el-table-column>
                        <el-table-column
                                :show-overflow-tooltip="true"
                                prop="f10"
                                label="当前项目进度"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                :show-overflow-tooltip="true"
                                prop="f11"
                                label="当前进度进展时间"
                                min-width="150">
                        </el-table-column>
                        <el-table-column
                                :show-overflow-tooltip="true"
                                prop="f12"
                                label="适应症（按项目）国内状态"
                                min-width="250">
                        </el-table-column>
                        <el-table-column
                                :show-overflow-tooltip="true"
                                prop="f16"
                                label="药物类型"
                                min-width="120">
                        </el-table-column>
                        <el-table-column
                                :show-overflow-tooltip="true"
                                prop="f38"
                                label="同成分竞争企业数"
                                min-width="150">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                融资详情
                <el-tag type="success"
                        :class="toggleFlag.investFlag ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"
                        @click="toggleFlag.investFlag = !toggleFlag.investFlag">
                </el-tag>
            </div>
            <div class="card-body" v-if="toggleFlag.investFlag">
                <div class="table-container">
                    <el-table
                            class="custom-table"
                            :data="medInvestList"
                            style="width: 100%">
                        <el-table-column type="expand" class="expend-colum">
                            <template slot-scope="props">
                                <p><strong>事件ID：</strong> {{ props.row.c1 }}</p>
                                <p><strong>融资企业简称：</strong> {{ props.row.c2 }}</p>
                                <p><strong>融资企业标准名称：</strong> {{ props.row.c3 }}</p>
                                <p><strong>国家/地区：</strong> {{ props.row.c5 }}</p>
                                <p><strong>技术赛道：</strong> {{ props.row.c6 }}</p>
                                <p><strong>轮次：</strong> {{ props.row.c7 }}</p>
                                <p><strong>金额：</strong> {{ props.row.c8 }}</p>
                                <p><strong>投资机构：</strong> {{ props.row.c9 }}</p>
                                <p><strong>披露日期：</strong> {{ props.row.c10 }}</p>
                                <p><strong>来源：</strong> <a :href="props.row.c11" target="_blank">{{ props.row.c11 }}</a></p>
                            </template>
                        </el-table-column>
                        <el-table-column
                                :show-overflow-tooltip="true"
                                prop="c3"
                                label="融资企业标准名称"
                                min-width="250">
                        </el-table-column>
                        <el-table-column
                                :show-overflow-tooltip="true"
                                prop="c7"
                                label="轮次"
                                min-width="100">
                        </el-table-column>
                        <el-table-column
                                :show-overflow-tooltip="true"
                                prop="c8"
                                label="金额"
                                min-width="120">
                        </el-table-column>
                        <el-table-column
                                :show-overflow-tooltip="true"
                                prop="c9"
                                label="投资机构"
                                min-width="200">
                        </el-table-column>
                        <el-table-column
                                :show-overflow-tooltip="true"
                                prop="c10"
                                label="披露日期"
                                min-width="100">
                        </el-table-column>
                        <el-table-column
                                :show-overflow-tooltip="true"
                                prop="c11"
                                label="来源"
                                min-width="80">
                            <template slot-scope="scope">
                                <el-button size="mini" type="danger" @click="openUrl(scope.$index, scope.row)">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
    // 使用Element UI
    Vue.use(ELEMENT);

    new Vue({
        el: '#app',
        data: {
            searchInput: '',
            comp: '',
            f12: '',
            f19: '',
            toggleFlag: {
                medFlag: true,
                investFlag: true
            },
            activeName: 'first',
            clinicalTrialsList: [],
            declarationProgressList: [],
            domesticProjectProgressList: [],
            medInvestList: []
        },
        mounted() {
            if (this.searchInput || this.comp || this.f12 || this.f19) {
                this.search();
            }
        },
        methods: {
            search() {
                if (this.searchInput || this.comp || this.f12 || this.f19) {
                    axios.get(`/cor/findByCorname?corname=${encodeURIComponent(this.searchInput)}&comp=${encodeURIComponent(this.comp)}&f12=${encodeURIComponent(this.f12)}&f19=${encodeURIComponent(this.f19)}`)
                        .then((response) => {
                            // 处理成功情况
                            this.clinicalTrialsList = response.data.clinicalTrialsList;
                            this.declarationProgressList = response.data.declarationProgressList;
                            this.domesticProjectProgressList = response.data.domesticProjectProgressList;
                            this.medInvestList = response.data.medInvestList;
                        })
                        .catch((error) => {
                            // 处理错误情况
                            console.log(error);
                        });
                } else {
                    this.$message({
                        showClose: true,
                        message: '请至少输入一个查询条件...',
                        type: 'warning'
                    });
                }
            },
            openUrl(index, row) {
                window.open(`${row.c11}`);
            },
            report() {
                window.open('/report');
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            exportExcel() {
                const corname = encodeURIComponent(this.searchInput);
                const comp    = encodeURIComponent(this.comp);
                const f12    = encodeURIComponent(this.f12);
                const f19    = encodeURIComponent(this.f19);
                window.open(`/export?corname=${corname}&comp=${comp}&f12=${f12}&f19=${f19}`, '_blank');
            }
        }
    });
</script>
</body>
</html>